import { Select } from 'antd'
import { useState, useEffect } from 'react'
import { getChannels } from '@/api'
const { Option } = Select
function Channels({ value, onChange }) {
  // 频道的hook
  const [channels, setChannels] = useState([])

  // 获取频道数据
  useEffect(() => {
    // 获取频道数据
    async function fetchData() {
      const res = await getChannels()
      // console.log('res:', res)
      setChannels(res.data.channels)
    }
    // 获取初始数据
    fetchData()
  }, [])
  return (
    // 直接把外部传入的value和onChange赋值上去
    <Select value={value} onChange={onChange} style={{ width: 120 }}>
      {channels.map((v) => {
        return (
          <Option key={v.id} value={v.id}>
            {v.name}
          </Option>
        )
      })}
    </Select>
  )
}

export default Channels
